import React from 'react';
import QueueAnim from 'rc-queue-anim';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
// import { Row, Col } from 'antd';

 const page1 = [
  {
    title: '无忧三包',
    content: '包牌 包税 包保险',
    src: require('../../assets/page1-1.png'),
  },
  {
    title: '超低月供',
    content: '还款无压力',
    src: require('../../assets/page1-1.png'),
  },
  {
    title: '快速提车',
    content: '专属一证带 审批便捷',
    src: require('../../assets/page1-1.png'),
  },
];

const Row = ({children}) => <div className="row">{children}</div>

const Col = ({children}) => <div className="col">{children}</div>

export default function Page1() {
  const children = page1.map((d, i) => (
    <QueueAnim
      component={Col}
      key={i}
      type="bottom"
      componentProps={{ span: 8 }}
    >
      <div key="image" className="image" style={{ backgroundImage: `url(${d.src})` }} />
      <h3 key="h3" className="title">{d.title}</h3>
      <p key="p" className="subtitle">{d.content}</p>
    </QueueAnim>
  ));
  return (
    <div className="page1-wrapper" >
      <h2 className="slogan">为什么选择我们</h2>
      <OverPack playScale={0.4}>
        <QueueAnim type="bottom" ease="easeOutQuart" leaveReverse>
          <QueueAnim
            key="content"
            type="bottom"
            component={Row}
            componentProps={{ gutter: 171 }}
          >
            {children}
          </QueueAnim>
        </QueueAnim>
      </OverPack>
    </div>);
}
